<template>
    <div class="meeting-files">
        <!-- 返回按钮 -->
        <BackButton :goBack="goBack" />

        <!-- 页面头部 -->
        <div class="page-header">
            <div class="meeting-info">
                <h1 class="title">{{ meetingTitle }}</h1>
                <div class="meeting-meta">
                    <span class="meeting-id">
                        <el-icon>
                            <Document />
                        </el-icon>
                        {{ meetingId }}
                    </span>
                    <span class="meeting-date">
                        <el-icon>
                            <Calendar />
                        </el-icon>
                        {{ meetingDate }}
                    </span>
                </div>
            </div>
            <el-button type="primary" class="schedule-btn">
                <el-icon>
                    <Plus />
                </el-icon>
                新建文档
            </el-button>
        </div>

        <!-- 文件列表表格 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="headerStyle"
                :row-class-name="tableRowClassName" empty-text="">
                <el-table-column prop="icon" label="名称" min-width="200">
                    <template #default="scope">
                        <div class="file-name-cell">
                            <el-icon class="file-icon">
                                <Document />
                            </el-icon>
                            <span class="file-name">{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="creator" label="创建者" min-width="120" />

                <el-table-column prop="updateTime" label="修改时间" min-width="200">
                    <template #default="scope">
                        <div class="update-info">
                            <div class="update-time">{{ scope.row.updateTime }}</div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="permission" label="文档权限" min-width="150">
                    <template #default="scope">
                        <el-dropdown trigger="click">
                            <span class="permission-dropdown">
                                {{ scope.row.permission }}
                                <el-icon class="el-icon--right">
                                    <ArrowDown />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>成员仅查看</el-dropdown-item>
                                    <el-dropdown-item>成员可编辑</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100" fixed="right">
                    <template #default="scope">
                        <el-button type="danger" size="small" link class="delete-btn">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, ArrowDown, Plus, Calendar } from '@element-plus/icons-vue'

const meetingTitle = ref('22.6肖安迪预定的会议')
const meetingId = ref('196 242 306')
const meetingDate = ref('2025年02月12日')

const tableData = ref([
    {
        name: 'react',
        creator: '22.6肖安迪',
        updateTime: '2025-02-09 22:07:35',
        permission: '成员仅查看'
    }
])

const goBack = () => {
    window.history.back()
}

const headerStyle = {
    background: '#f5f7fa',
    color: '#606266',
    fontWeight: 600,
    height: '50px',
    borderBottom: '2px solid #EBEEF5'
}

const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};
</script>

<style scoped lang="scss">
.meeting-files {
    padding: 20px;
    background-color: white;

    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;

    .page-header {
        padding: 24px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .meeting-info {
            .title {
                font-size: 24px;
                font-weight: 600;
                color: #303133;
                margin: 0 0 16px 0;
            }

            .meeting-meta {
                display: flex;
                gap: 24px;
                color: #909399;
                font-size: 14px;

                span {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .el-icon {
                        font-size: 16px;
                    }
                }
            }
        }

        .schedule-btn {
            padding: 12px 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }

    .table-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    font-size: 16px;
    margin:0px 14px;

    :deep(.el-table) {
      .even-row {
        background: #fafafa;
      }

      .odd-row {
        background: #ffffff;
      }

      tr {
        height: 4rem;
        font-size: 1.2rem;
      }

      td {
        height: 4rem;
        font-size: 16px;
      }

      .el-tag {
        font-size: 14px;
      }

      .el-button {
        font-size: 14px;
      }
    }
  }
    .permission-dropdown {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #409EFF;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }
        }
}



</style>